<!DOCTYPE html>
<html lang="zh-CN">
  <head>
		<title><{block name="title"}><{/block}> — Vue.js</title>
    <meta charset="utf-8">
    <meta name="description" content="Vue.js - The Progressive JavaScript Framework">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

		<script src="__ROOT__/js/jquery-3.1.0.min.js" type="text/javascript"></script>

    <link rel="icon" href="/images/logo.png" type="image/png">

    <meta name="msapplication-config" content="browserconfig.xml">
    <link rel="manifest" href="/manifest.json">

    <!-- <link href='//fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600|Roboto Mono' rel='stylesheet' type='text/css'> -->
    <!-- <link href='//fonts.googleapis.com/css?family=Dosis:500&text=Vue.js' rel='stylesheet' type='text/css'> -->

    <link href="__ROOT__/css/font-awesome.min.css" tppabs="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">

		<link rel="stylesheet" type="text/css" href="__ROOT__/css/prettify.css"/>
    <!-- main page styles -->
    <link rel="stylesheet" href="__ROOT__/css/page.css" tppabs="https://cn.vuejs.org/css/page.css">
<style type="text/css">
	.content .linenums>ol {
		margin: 0;
		padding-left:35px;
	}
	.hljs-comment,.hljs-quote{color:#8e908c}
	.hljs-deletion,.hljs-name,.hljs-regexp,.hljs-selector-class,.hljs-selector-id,.hljs-tag,.hljs-template-variable,.hljs-variable{color:#c82829}
	.hljs-built_in,.hljs-builtin-name,.hljs-link,.hljs-literal,.hljs-meta,.hljs-number,.hljs-params,.hljs-type{color:#f5871f}
	.hljs-attribute{color:#eab700}
	.hljs-addition,.hljs-bullet,.hljs-string,.hljs-symbol{color:#718c00}
	.hljs-section,.hljs-title{color:#4271ae}
	.hljs-keyword,.hljs-selector-tag{color:#8959a8}
	.hljs{display:block;overflow-x:auto;background:#fff;color:#4d4d4c;padding:.5em}
	.hljs-emphasis{font-style:italic}
	.hljs-strong{font-weight:700}
</style>

    <!-- this needs to be loaded before guide's inline scripts -->
    <script src="__ROOT__/js/vue.js" ></script>


  </head>

<body class="docs">

<div id="header">
	<a id="logo" href="https://cn.vuejs.org/">
		<img src="__ROOT__/images/logo.png" tppabs="https://cn.vuejs.org/images/logo.png">
		<span>Vue.js</span>
	</a>

	<ul id="nav">
	<li class="nav-dropdown-container learn">
		<a class="nav-link current">学习</a><span class="arrow"></span>
		<ul class="nav-dropdown">
			<li> 
			<ul>
				<li><a href="index.htm" tppabs="https://cn.vuejs.org/v2/guide/" class="nav-link current">教程</a></li>
				<li><a href="https://cn.vuejs.org/v2/api/" class="nav-link">API</a></li>
				<li><a href="https://cn.vuejs.org/v2/style-guide/" class="nav-link">风格指南 (beta)</a></li>
				<li><a href="https://cn.vuejs.org/v2/examples/" class="nav-link">示例</a></li>
			</ul> 
			</li>
		</ul>
	</li>

	<li class="nav-dropdown-container ecosystem">
		<a class="nav-link">生态系统</a> 
		<span class="arrow"></span>

		<ul class="nav-dropdown">
			<li><h4>帮助</h4></li>
			<li> 
			<ul>
				<li><a href="https://forum.vuejs.org/" class="nav-link" target="_blank">论坛</a></li>
				<li><a href="https://chat.vuejs.org/" class="nav-link" target="_blank">聊天室</a></li>
			</ul> 
			</li>

			<li><h4>工具</h4></li>
			<li>
				<ul>
					<li><a href="https://github.com/vuejs/vue-devtools" class="nav-link" target="_blank">Devtools</a></li>
					<li><a href="https://vuejs-templates.github.io/webpack" class="nav-link" target="_blank">webpack 模板</a></li>
					<li><a href="https://vue-loader.vuejs.org/" class="nav-link" target="_blank">Vue Loader</a></li>
				</ul>
			</li>
			<li><h4>核心插件</h4></li>
			<li><ul>
				<li><a href="https://router.vuejs.org/" class="nav-link" target="_blank">Vue Router</a></li>
				<li><a href="https://vuex.vuejs.org/" class="nav-link" target="_blank">Vuex</a></li>
				<li><a href="https://ssr.vuejs.org/" class="nav-link" target="_blank">Vue 服务端渲染</a></li>
			</ul></li>
			<li><h4>信息</h4></li>
			<li><ul>
				<li><a href="https://news.vuejs.org/" class="nav-link" target="_blank">周刊</a></li>
				<li><a href="https://github.com/vuejs/roadmap" class="nav-link" target="_blank">Roadmap</a></li>
				<li><a href="https://twitter.com/vuejs" class="nav-link" target="_blank">Twitter</a></li>
				<li><a href="https://medium.com/the-vue-point" class="nav-link" target="_blank">博客</a></li>
				<li><a href="https://vuejobs.com/?ref=vuejs" class="nav-link" target="_blank">工作</a></li>
			</ul></li>
			<li><h4>资源列表</h4></li>
			<li><ul>
				<li><a href="https://github.com/vuejs" class="nav-link" target="_blank">官方仓库</a></li>
				<li><a href="https://curated.vuejs.org/" class="nav-link" target="_blank">Vue 优选</a></li>
				<li><a href="https://github.com/vuejs/awesome-vue" class="nav-link" target="_blank">Vue 资源</a></li>
			</ul></li>
		</ul>
	</li>
	</ul>

</div>


<div id="main" class="fix-sidebar">
	<div class="sidebar">
		<div class="sidebar-inner">
			<div class="list">
			<{block name="sidebar"}><{include file="Public:sidebar" /}><{/block}>
			</div>
		</div>
	</div>

	<{block name="content"}><{/block}>		<!-- important -->

<!-- var end -->
</div>	<!-- #main -->

<script>
$('.menu-sub').hide();
let thisAction = '<{$Think.ACTION_NAME}>';
$('#'+thisAction+'>a').addClass('current').prev(); 
$('#'+thisAction+'>i').addClass('sidebar-tap').html('－');
$('#'+thisAction+' .menu-sub').show();


$('.sidebar-menu>i').click(function(){

	if($(this).hasClass('sidebar-tap')) {
		$(this).html('＋').toggleClass('sidebar-tap');
		$(this).siblings('.menu-sub').hide();
	}else {
		$('.sidebar-menu>i').html('＋').removeClass('sidebar-tap');
		$('.sidebar-menu .menu-sub').hide();

		$(this).html('－').toggleClass('sidebar-tap');
		$(this).siblings('.menu-sub').show();
	}
});



let href = window.location.href;
let start = href.indexOf('#');
let href2 = '';
if(start > 0) {
	href2 = href.slice(start+1);
	$('#'+thisAction+' .section-link[href="#'+href2+'"]').addClass('active');
}else {
	$('#'+thisAction+' .menu-sub .section-link:first').addClass('active');
}

let $link = $('.content .headerlink');
let $slink = $('#'+thisAction+' .menu-sub .section-link');
$('#'+thisAction+' .section-link').click(function(){
	$slink.removeClass('active');
	$(this).addClass('active');
});

let scrollArr = [];
$.each( $link, function() {
	let offset = $(this).offset();
	let thisId = $(this).attr('id');
	scrollArr.push(offset.top);
});

$(window).on('scroll', function(){
	let scrollTop = $(document).scrollTop();
	let nap = 110;
	let slength = scrollArr.length;
	let i=0;
	if(scrollTop < (scrollArr[0]-nap) ) {
	}else if(scrollTop >= scrollArr[slength-1]-nap) {
		i = slength-1;
	}else {
		for(i=0; i<scrollArr.length; i++) {
			if(scrollTop>=scrollArr[i]-nap && scrollTop<scrollArr[i+1]-nap) {
				break;
			}
		}
	}

	if($slink.eq(i).length > 0){
		$slink.removeClass('active');
		$slink.eq(i).addClass('active');
	}
});


</script>

<!-- 
		<script src="__ROOT__/js/smooth-scroll.min.js" tppabs="https://cn.vuejs.org/js/smooth-scroll.min.js"></script>
 -->
    <!-- main custom script for sidebars, version selects etc. -->
    <script src="__ROOT__/js/css.escape.js" tppabs="https://cn.vuejs.org/js/css.escape.js"></script>
		<!-- 
    <script src="__ROOT__/js/common.js" tppabs="https://cn.vuejs.org/js/common.js"></script>
 -->
    <!-- search -->
    <link href="__ROOT__/css/docsearch.min.css" tppabs="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css" rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="__ROOT__/css/search.css" tppabs="https://cn.vuejs.org/css/search.css">
    <script src="__ROOT__/js/docsearch.min.js" tppabs="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script>
    <script>
    [
      '#search-query-nav',
      '#search-query-sidebar',
      '#search-query-menu'
    ].forEach(function (selector) {
      if (!document.querySelector(selector)) return
      // search index defaults to v2
      var match = window.location.pathname.match(/^\/(v\d+)/)
      var version = match ? match[1] : 'v2'
      docsearch({
      appId: 'BH4D9OD16A',
      apiKey: '5638280abff9d207417bb03be05f0b25',
      indexName: 'vuejs_cn2',
      inputSelector: selector,
      algoliaOptions: { facetFilters: ["version:" + version] }
      })
    })
    </script>

    <!-- fastclick -->
    <script src="__ROOT__/js/fastclick.min.js" tppabs="https://cdnjs.cloudflare.com/ajax/libs/fastclick/1.0.6/fastclick.min.js"></script>
    <script>
    document.addEventListener('DOMContentLoaded', function() {
      FastClick.attach(document.body)
    }, false)
    </script>
  </body>
</html>
